<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>优永动助手 - 交易详情</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="/layui/layui.all.js"></script>
    <style>
        body {
            margin: 0px 0px 0px 0px;
        }

        .layui-container {
            width: 100%;
            padding: unset;
        }

        .detail-top {
            width: 100%;
            height: 500px;
            background-image: url('../images/jiaoyitop.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }

        .return-box {
            padding-left: 20px;
            padding-top: 30px;
        }

        .return-btn {
            font-size: 70px;
            color: white;
        }

        .jiaoyijilu-btn {
            font-size: 44px;
            color: white;
        }

        .celue {
            margin-top: 30px;
            border-radius: 30px;
            font-size: 30px;
            color: white;
            background-color: rgba(238, 47, 50, 1);
            text-align: center;
        }

        .bizhongname {
            margin-top: 20px;
            color: white;
            font-size: 48px;
        }

        .jiaoyi-box {
            font-size: 36px;
            color: white;
            text-align: center;
            margin-top: 30px;
        }

        .jiaoyi-module {
            font-size: 40px;
            padding-left: 30px;
            margin-top: 16px;

        }
        .celue-row{
            font-size: 36px;
            text-align: center;
            margin-top: 30px;
        }
        .celue-xiangguan-main{
            margin-bottom: 30px;
        }
        .celue-name{
            color: grey;
        }
        .celue-value{
            color: rgba(59, 174, 180, 0.83);
            font-weight: 600;
        }
        .celue-caozuo-img{
            height: 50%;
            width: 50%;
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 10px;
            box-shadow: 5px 5px 15px #b3b3b3;
        }
        .celue-caozuo-name{
            font-size: 42px;
            text-align: center;
        }
        .footer-btn{
            margin-top: 80px;
            font-size: 36px;
            color: white;
            background-color: #23b14d;
            width: 80%;
            height: 120px;
            border-radius: 20px;
            margin-left: 10%;

        }
        .footer-btn-stop{
            margin-top: 80px;
            font-size: 36px;
            color: white;
            background-color: #ee101d;
            width: 80%;
            height: 120px;
            border-radius: 20px;
            margin-left: 10%;

        }

    </style>
</head>
<body>


<div class="layui-container">

    <div class="detail-top">

        <div class="layui-row return-box">

            <div class="layui-col-xs2" onclick="history.go(-1)">
                <i class="layui-icon layui-icon-left return-btn"></i>
            </div>
            <div class="layui-col-xs3 layui-col-xs-offset7 jiaoyijilu-btn" th:onclick="'javascript:toRecordPage(\''+${bizhongDO.id}+'\');'">
                交易记录
            </div>
        </div>

        <div class="layui-row">
            <input type="hidden" id="bizhongid" th:value="${bizhongDO.id}">
            <input type="hidden" id="id" th:value="${jiaoyicelueDO.id}">
            <div class="layui-col-xs3 layui-col-xs-offset1 bizhongname" th:text="${bizhongDO.getUpname()}">

            </div>

            <div class="layui-col-xs3 layui-col-xs-offset1 celue" id="topceluetxt"
                 th:text="${jiaoyicelueDO.xunhuantype}==0?'单次循环':'策略循环'">

            </div>
        </div>

        <div class="layui-row">
            <div class="layui-col-xs4 jiaoyi-box">
                <div class="layui-row">持仓金额</div>
                <div class="layui-row" th:text="${jiaoyicelueDO.getChicangjinevo()}"></div>
            </div>

            <div class="layui-col-xs4 jiaoyi-box">
                <div class="layui-row">持仓均价</div>
                <div class="layui-row" th:text="${jiaoyicelueDO.getchicangjunjiavo()}"></div>
            </div>

            <div class="layui-col-xs4 jiaoyi-box">
                <div class="layui-row">购买次数</div>
                <div class="layui-row" th:text="${#numbers.formatDecimal(jiaoyicelueDO.bucangcishu,1,0)}"></div>
            </div>
        </div>

        <div class="layui-row">
            <div class="layui-col-xs4 jiaoyi-box">
                <div class="layui-row">持仓数量</div>
                <div class="layui-row" th:text="${jiaoyicelueDO.getchicangshuliangvo()}"></div>
            </div>

            <div class="layui-col-xs4 jiaoyi-box">
                <div class="layui-row">当前价格</div>
                <div class="layui-row" th:text="${bizhongDO.getnowpricevo()}"></div>
            </div>

            <div class="layui-col-xs4 jiaoyi-box">
                <div class="layui-row">涨幅</div>
                <div class="layui-row" th:text="${jiaoyicelueDO.getzhangfuvo()}"></div>
            </div>
        </div>

    </div>

    <div class="layui-row">
        <div class="layui-col-xs1">
            <img src="/images/zichanicon.png" width="90px" alt="">
        </div>
        <div class="layui-col-xs4 jiaoyi-module">
            策略相关
        </div>
    </div>

    <div class="layui-row celue-xiangguan-main">
        <div class="layui-row celue-row">
            <div class="layui-col-xs3 celue-name">
                首单额度
            </div>
            <div class="layui-col-xs3 celue-value" th:text="${jiaoyicelueDO.getfirstamountvo()}">

            </div>
            <div class="layui-col-xs3 celue-name">
                倍投上限
            </div>
            <div class="layui-col-xs3 celue-value" th:text="${#numbers.formatDecimal(jiaoyicelueDO.beitoushangxian,1,0)}">

            </div>
        </div>

        <div class="layui-row celue-row">

            <div class="layui-col-xs3 celue-name">
                止盈比例
            </div>
            <div class="layui-col-xs3 celue-value" th:text="${jiaoyicelueDO.getzhiyingbilivo()}">

            </div>
            <div class="layui-col-xs3 celue-name">
                止盈回调
            </div>
            <div class="layui-col-xs3 celue-value" th:text="${jiaoyicelueDO.getzhiyinghuidiaovo()}">

            </div>
        </div>
        <div class="layui-row celue-row">
            <div class="layui-col-xs3 celue-name">
                补仓跌幅
            </div>
            <div class="layui-col-xs3 celue-value" th:text="${jiaoyicelueDO.getbucangdiefuvo()}">

            </div>
            <div class="layui-col-xs3 celue-name">
                补仓回调
            </div>
            <div class="layui-col-xs3 celue-value" th:text="${jiaoyicelueDO.getbucanghuidiaovo()}">

            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-col-xs1">
            <img src="/images/cedo.png" width="90px" alt="">
        </div>
        <div class="layui-col-xs4 jiaoyi-module">
            策略操作
        </div>
    </div>
    <input type="hidden" id="xunhuantype" th:value="${jiaoyicelueDO.xunhuantype}">

    <div class="layui-row">
        <div class="layui-col-xs6"   id="changeceluebtn">
            <div class="layui-row celue-caozuo-img">
                <img id="celueimg" th:src="${jiaoyicelueDO.xunhuantype}==0?'/images/dancicelue.png':'/images/jiaoyi1.png'"
                     width="100%" height="100%" alt="">
            </div>
            <div id="celuetxt" class="layui-row celue-caozuo-name" th:text="${jiaoyicelueDO.xunhuantype}==0?'单次循环':'策略循环'">

            </div>
        </div>

        <div class="layui-col-xs6" id="qingchangmaichubtn">
            <div class="layui-row celue-caozuo-img">
                <img src="/images/jiaoyi3.png" width="100%" height="100%" alt="">
            </div>
            <div class="layui-row celue-caozuo-name">清仓卖出</div>
        </div>
    </div>



    <div class="layui-row">

        <div class="layui-col-xs6" onclick="celueedit()">
            <button class="footer-btn layui-btn">交易设置</button>
        </div>

        <div class="layui-col-xs6">
            <input type="hidden" id="qidong" th:value="${jiaoyicelueDO.celuestatus}">
            <button id="qidongbtn" class="footer-btn layui-btn" th:class="${jiaoyicelueDO.celuestatus}==1?'footer-btn-stop layui-btn':'footer-btn layui-btn'"
                    th:text="${jiaoyicelueDO.celuestatus}==1?'停止':'启动'">启动</button>
        </div>

    </div>


</div>



<script>
    function toRecordPage(bizhongid) {
        window.location = "/bizhongjilu?bizhongid="+bizhongid;
    }


    function celueedit() {

        window.location = "/jiaoyicelue/edit?id="+$("#id").val();

    }

    $(function () {
        //循环状态ajax
        $("#changeceluebtn").click(function () {
            var xunhuantype = $("#xunhuantype").val();
            changeCelue(xunhuantype);
        });

        //启动状态
        $("#qidongbtn").click(function () {
                var qidong = $("#qidong").val();
                changeqidong(qidong);
        })
        //全部卖出监听
        $("#qingchangmaichubtn").click(function () {
               var maichu = confirm("确定卖出所有吗？");
               if(maichu==true){
                   $.ajax({
                       url:"/jiaoyicelue/maichu",
                       type:"post",
                       data:{
                           id:$("#id").val()
                       },
                       success:function (data) {
                           alert(data.msg);
                       },
                       error:function (data) {
                           alert("请求数据失败");
                       }
                   });
               }
        });
    });
    
    function changeqidong(qidong) {
        var sta = 0;
        var text = '启动';
        var color = "green";

        if(qidong=='0'||qidong==0){
            sta = 1;
            text = '停止';
            color = "red";
        }
        if(qidong=='1'||qidong==1){
            sta = 0;
            text = '启动';
            color = "green";
        }

        $.ajax({
            url:"/jiaoyicelue/editxunhuanstatus",
            type:"post",
            data:{
                id:$("#id").val(),
                celuestatus:sta,
                bizhongid:$("#bizhongid").val()

            },
            success:function (data) {
                alert(data.msg);
                if(data.code==0){
                    $("#qidong").val(sta);
                    $("#qidongbtn").text(text);
                    $("#qidongbtn").css("background-color",color);
                }


            },
            error:function (data) {
                alert("请求数据失败");
            }
        });
        
    }


    function changeCelue(xunhuantype) {
        var sta = 0;
        var text = '单次策略';
        var src = "/images/dancicelue.png";

        if(xunhuantype=='0'||xunhuantype==0){
            sta = 1;
            text = '策略循环';
            src = "/images/jiaoyi1.png";
        }
        if(xunhuantype=='1'||xunhuantype==1){
            sta = 0;
            text = '单次策略';
            src = "/images/dancicelue.png";
        }

        $.ajax({
            url:"/jiaoyicelue/editxunhuanstatus",
            type:"post",
            data:{
                id:$("#id").val(),
                xunhuantype:sta,
                bizhongid:$("#bizhongid").val()

            },
            success:function (data) {
                alert(data.msg);
                if(data.code==0){
                    $("#xunhuantype").val(sta);
                    $("#celueimg").attr("src",src);
                    $("#celuetxt").text(text);
                    $("#topceluetxt").text(text);
                }


            },
            error:function (data) {
                alert("请求数据失败");
            }
        });

    }
</script>
</body>
</html>